<template>
	<!-- 个人捐赠页面 -->
	<view class="personal-donation">
		<view class="header header-bonus">
			<view class="title">
				奖励金
			</view>
			<view class="amount">0</view>
			<view class="bonus-btn-wrapper">
				<!-- <view class="bonus-btn">提现至微信</view> -->
				<view class="bonus-btn" @click="handleShowBonusInfo">关于奖励金</view>
			</view>
		</view>
		<view class="header">
			<view class="title">
				已捐金额（元）
			</view>
			<view class="amount">{{ donateMoney }}</view>
			<!-- <view class="bonus-btn-wrapper">
				<view class="bonus-btn">提现至微信</view>
				<view class="bonus-btn" @click="handleShowBonusInfo">关于奖励金</view>
			</view> -->
		</view>

		<!--  -->
		<view class="donate-list">
			<scroll-view class="scroll-donate-list" scroll-x="true">
				<view class="donate-item" v-for="(dona,index) in donatList" :key="index" @click.stop.prevent="handleChooseImage(dona)">
					<view class="donate-image">
						<u-image width="100%" height="300rpx" :src="dona.picUrl || dona.sysCharity.charityPic"></u-image>
					</view>
					<view class="donate-content">
						<view class="project-name">{{ dona.charityName }}</view>
						<view class="gap">
							<u-gap height="5" bg-color="#edb68f"></u-gap>
						</view>
						<view class="donate-amount">{{ (dona.isFinish === 0 && !dona.picUrl) ? '待上传' : (dona.isFinish === 0 && dona.picUrl) ? '待确认' : '已捐赠' }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 登录弹窗 -->
		<u-popup v-model="showLoginDialog" mode="center" width="500rpx">
			<view class="popup-wrapper">
				<view class="tip">
					<view>您凭证已过期或未登录</view>
					<view>请登录</view>
				</view>
				<u-button type="primary" :loading="isLogin" open-type="getUserInfo" @getuserinfo="handleLogin">登录</u-button>
			</view>
		</u-popup>
		
		<!-- 奖励金信息 -->
		<u-popup v-model="showBonusInfo" mode="bottom">
			<view class="bonus-info-popup-wrapper">
				<view class="description-text">
					<view class="text">
						关于吃鲸信息奖励金
					</view>
					
					<view class="text">
						<view class="details">
							奖励金获得方式：
						</view>
						<view class="details">
							1、新用户首次登录小程序可获得2个奖励金。
						</view>
						<view class="details">
							2、新用户首次发布内容可获得2个奖励金。
						</view>
						<view class="details">
							3、一天内首次转发小程序可获得2个奖励金，一天内多次皆算一次。
						</view>
						<view class="details">
							4、每次成功打卡即可获得2个奖励金，一天内同目标打卡多次皆算一次。若用户通过非正常手段达标打卡的行为可视为作弊，如打卡内容为他人的内容，或发布内容与目标打卡契约不符合。我们有权将其此次成功打卡，改为未成功打卡，并取消该次奖励金的获得。
						</view>
					</view>
					
					<view class="text">
						注：1个奖励金价值0.1元人民币。奖励金可提现为微信零钱，用户可进入“奖励金和捐赠”页面，点击“提现至微信”。经后台核实后处理，即可将奖励金提现为微信零钱。具体到账时间请以信息通知为准。
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import loginMixin from '@/utils/loginMixin.js'
	import { donateMoney } from '@/api/user.js'
	import { donateGoalBreakPromise, upload, submitDonateDiploma } from '@/api/goal.js'


	export default {
		
		mixins: [loginMixin],

		data() {
			return {
				showBonusInfo: false,
				showLoginDialog: false, // 显示登录弹窗
				donatList: [],
				openId: null,
				flag: 'mine', // mine：我的 ta：他的
				donateMoney: 0, // 捐赠金额
				submitDonateDiploma: {} // 需要提交捐赠截图的项目
			}
		},

		async onLoad(options) {
			this.flag = options.flag
			this.openId = options.openId
			this.init()
		},

		methods: {
			async init() {
				await this.handleGetDonateMoney()
				await this.handleGetDonateGoalBreakPromise()
			},

			// 获取用户的捐赠金额
			async handleGetDonateMoney() {
				if (this.openId === 'undefined') return
				const data = JSON.stringify({
					openId: this.openId
				})
				try {
					const {
						resultData
					} = await donateMoney({
						data
					})
					this.donateMoney = resultData.donateMoney / 100 // 金额单位：分
				} catch (e) {
					//TODO handle the exception
					this.donateMoney = 0
					if (e.resultCode === 701) {
						this.showLoginDialog = true
					}
				}
			},

			// 获取捐赠项目
			async handleGetDonateGoalBreakPromise() {
				if (this.openId === 'undefined') return
				try{
					const data = JSON.stringify({
						openId: this.openId
					})
					const { resultData } = await donateGoalBreakPromise({ data })
					this.donatList = resultData.list
				}catch(e){
					//TODO handle the exception
					if (e.resultCode === 701) {
						this.showLoginDialog = true
					}
				}
			},
			
			// 选择图片
			handleChooseImage(dona) {
				if (dona.picUrl && dona.isFinish){
					this.handleExamineImage(dona.picUrl)
					return
				}
				this.submitDonateDiploma = dona
				
				var that = this
				const count = 1
				uni.chooseImage({
					count: count, //默认 9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						for (const img of res.tempFilePaths) {
							this.urlTobase64(img)
						}
					}
				});
			},
			
			// 转base64码
			urlTobase64(url) {
				// #ifdef MP-WEIXIN
					wx.getFileSystemManager().readFile({
						filePath: url, //选择图片返回的相对路径
						encoding: 'base64', //编码格式
						success: res => {
							//成功的回调
							this.handleUpload(res.data)
						}
					});
				// #endif
				
			},
			
			// 上传图片
			async handleUpload(image) {
				try {
					uni.showToast({
						icon: 'loading'
					})
					const data = JSON.stringify({
						picBase64: image,
						picType: 3
					})
					const { resultData } = await upload({data})
					this.handleSubmitPic(resultData)
				} catch (e) {
					uni.hideToast()
					console.log(e)
				}
			},
			
			// 提交捐赠截图
			async handleSubmitPic(picUrl) {
				// submitDonateDiploma
				const data = JSON.stringify({
					openId: this.openId,
					userDonateId: this.submitDonateDiploma.userDonateId,
					picUrl: picUrl
				})
				
				try {
					const res = await submitDonateDiploma({ data })
					this.handleGetDonateGoalBreakPromise()
					uni.hideToast()
				} catch(e) {
					uni.hideToast()
				}
			},
		
			// 查看图片
			handleExamineImage(imageUrl) {
				uni.previewImage({
					indicator: 'none',
					urls: [imageUrl]
				})
			},
			
			handleShowBonusInfo() {
				this.showBonusInfo = true
			},
		}
	}
</script>

<style lang="scss">
	.personal-donation {
		.header {
			width: calc(100vw - 80rpx);
			margin: 0 auto 24rpx;
			padding: 40rpx;
			background-image: linear-gradient(to right, #f16c39, #f5a743);
			border-radius: 8rpx;
			box-sizing: border-box;

			.title {
				margin-bottom: 24rpx;
				color: #fff;
				font-size: 32rpx;
			}

			.amount {
				padding-bottom: 48rpx;
				font-size: 48rpx;
				color: #fff;
			}
			
			.bonus-btn-wrapper {
				display: flex;
				justify-content: space-between;
				
				.bonus-btn {
					padding: 16rpx 32rpx;
					border-radius: 8rpx;
					background-color: #fff;
					font-size: 24rpx;
				}
			}
		}
		.header-bonus {
			background-image: linear-gradient(to right, #059592, #66e8da);
		}
	}

	// 发布列表
	.donate-list {
		margin: 0 auto;
		padding: 0 40rpx;
	}

	.scroll-donate-list {
		width: 100%;
		display: flex;
		flex-direction: row;
		white-space: nowrap;

		.donate-item {
			margin-right: 16rpx;
			width: 48.5%;
			display: inline-block;

			&:last-child {
				margin-right: 0;
			}

			.donate-image {
				height: 250rpx;
				overflow: hidden;
				
				.common {
					width: 100%;
					height: 300rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #e5e5e5;
				}
			}

			.donate-content {
				.project-name {
					margin-bottom: 16rpx;
					text-align: center;
				}

				.gap {
					margin-bottom: 12rpx;
				}

				.donate-amount {
					text-align: center;
				}
			}
		}
	}
	
	.popup-wrapper {
		padding: 24rpx 24rpx 40rpx;
		text-align: center;
	
		.tip {
			padding: 50rpx 0;
		}
	}
	
	.bonus-info-popup-wrapper {
		padding: 40rpx;
		background-color: #000000;
	
		.title {
			margin-bottom: 28rpx;
			text-align: center;
		}
	
	
		.text {
			margin-bottom: 30rpx;
			font-size: 32rpx;
			color: #fff;
			
			.details {
				margin-bottom: 12rpx;
			}
		}
	}
</style>
